<template>
<div class="upload-images">
  <el-upload :action="action" name="files" :file-list="parseFileList" list-type="text" :accept="accept" :auto-upload="true" :on-success="handlePictureSuccess" :on-error="handlePictureError" :on-preview="handlePicturePreview" :on-remove="handlePictureRemove" :before-upload="(file) => beforeUpload(file)" :class="images.length >= max ? 'hidden' : ''">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过10m</div>
  </el-upload>
  <el-dialog append-to-body :visible.sync="dialogVisible" width="100%" fullscreen lock-scroll>
    <iframe :src="dialogImageUrl" type="application/x-google-chrome-pdf" frameborder="0" style="width: 100vw; height: 100vh">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      </head>
    </iframe>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: 'Upload',
  filters: {},
  props: {
    fileList: {
      type: [Array, String],
      default: () => []
    },
    accept: {
      type: String,
    },
    max: {
      type: Number
    }
  },
  data() {
    return {
      action: process.env.VUE_APP_BASE_API + '/common/oss/files',
      domain: '',
      images: [],
      dialogImageUrl: '',
      dialogVisible: false,
      fileName: ''
    }
  },
  // watch: {
  //   parseFileList(val) {
  //     this.parsedFileList = val
  //   }
  // },
  computed: {
    parseFileList() {
      if (typeof this.fileList === 'string') {
        console.log(777)
        this.images = [this.fileList]
        const parsedFileList = [{ url: this.fileList }]
        return parsedFileList
      } else if (this.fileList.length) {
        this.images = this.fileList
        console.log(this.fileList)
        const parsedFileList = this.fileList.map(value => {
          const obj = { url: value.url, name: value.name }
          console.log(obj)
          return obj
        })
        return parsedFileList
      }
    }
  },
  methods: {
    handlePictureRemove(file, fileList) {
      const list = fileList.map(value => {
        if (value.response) {
          return this.domain + value.response.data[0]
        } else {
          return value.url
        }
      })
      this.images = list
      this.$emit('change', list)
    },
    handlePicturePreview(file) {
      console.log(file)
      if (file.url) {
        this.dialogImageUrl = file.url
      } else {
        this.dialogImageUrl = file.response.data[0]
      }
      this.dialogVisible = true
    },
    handlePictureSuccess(file) {
      const list = [...this.images]
      list.push({ url: this.domain + file.data[0], name: this.fileName })
      this.images = list
      this.$emit('change', list)
    },
    handlePictureError(val) {
      console.log(val)
    },
    beforeUpload(file) {
      this.fileName = file.name
      const isLt500K = file.size / 1024 < 10240
      if (!isLt500K) {
        this.$message.error('上传PDF文件大小不能超过 10m!')
      }
      return isLt500K
    }
  }
}
</script>

<style scoped>
</style><style lang="scss">
.upload-images .hidden .el-upload--picture-card {
  display: none;
}
</style>
